body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

h2 {
  text-align: center;
  margin-top: 10px;
}

#chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full height of the viewport */
}

#chat-box {
  border: 1px solid #ccc;
  background: #fff;
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
}

#message-input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#send-btn {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

#send-btn:hover {
  background-color: #45a049;
}

/* 样式：用户和机器人名称 */
.user-name {
  color: hsl(20, 94%, 49%); /* 红黄色 */
}

.bot-name {
  color: hsl(224, 86%, 51%); /* 蓝色 */
}

.think-block {
  background-color: #eee;
  padding: 5px;
  margin: 5px 0;
}

p {
  margin: 10px 0;
}

strong {
  color: #0066cc;
}

/* Markdown content styling */
.markdown-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

#input-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

/* 设置水平分割线的样式，取消居中效果 */
hr {
  margin: 1em 0;       /* 上下边距 */
  border: none;
  border-top: 1px solid #ccc;
  text-align: left;    /* 确保不居中 */
}

/* 确保后续的段落默认左对齐 */
#chat-box p,
#chat-box div,
#chat-box blockquote,
#chat-box table {
  text-align: left;
}
